<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
    	作者：zyl
    	时间：2017-06-02
    	描述：getImageDate和putImageDate
    	通过 getImageData() 复制画布上指定矩形的像素数据，然后通过 putImageData() 将图像数据放回画布：
   定义和用法    
getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。（以一维数组的形式存储了连续的rgba 4个一组）
对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：
R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)
color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中。
计算公式：
第i个像素：						第x行第y列的像素
								i=x*width+y
r:pixelData[4*i+0]				r:pixelData[4*i+0]
g:pixelData[4*i+1]				g:pixelData[4*i+1]
b:pixelData[4*i+2]				b:pixelData[4*i+2]
a:pixelData[4*i+3]				a:pixelData[4*i+3]
提示：在操作完成数组中的 color/alpha 信息之后，您可以使用 putImageData() 方法将图像数据拷贝回画布上 	
 提示：您也可以使用 getImageData() 方法来反转画布上某个图像的每个像素的颜色。
使用该公式遍历所有的像素，并改变其颜色值：

JavaScript 语法
var imgData=context.getImageData(x,y,width,height);
参数值
参数			  	描述
x			开始复制的左上角位置的 x 坐标。
y			开始复制的左上角位置的 y 坐标。
width		将要复制的矩形区域的宽度。
height		将要复制的矩形区域的高度。


定义和用法
putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。
提示：请参阅 getImageData() 方法，它可复制画布上指定的矩形的像素数据。
提示：请参阅 createImageData() 方法，它可创建新的空白 ImageData 对象。
JavaScript 语法：
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
 
 参数值
 
参数					描述
imgData		规定要放回画布的 ImageData 对象。
x			ImageData 对象左上角的 x 坐标，以像素计。
y			ImageData 对象左上角的 y 坐标，以像素计。
dirtyX		可选。水平值（x），以像素计，在画布上放置图像的位置。
dirtyY		可选。水平值（y），以像素计，在画布上放置图像的位置。
dirtyWidth	可选。在画布上绘制图像所使用的宽度。
dirtyHeight	可选。在画布上绘制图像所使用的高度。
    -->
	<body>
		<div style="margin: 20px auto; width: 1200px;">
		<canvas id="canvasa" width="550" height="500" style="border: 1px solid red; display: block; float: left;">
			浏览器不支持
		</canvas>
		<canvas id="canvasb" width="550" height="500"  style="border: 1px solid yellow;  display: block;float: right;">
			浏览器不支持
		</canvas>
		</div>
		<div style="clear: both;"></div>
		<div style="text-align: center;margin-top:50px;font-size: 20px ;">
		<a href="javascript:filter();">Filter复制全部图像</a>
		<a href="javascript:filter1();">部分</a>
		<a href="javascript:filter2();">参数区别</a>
		<a href="javascript:filter3();">滤镜</a>
		</div>
	</body>
	<script>
		var canvasa = document.getElementById("canvasa");
		var contexta = canvasa.getContext("2d");
		var canvasb = document.getElementById("canvasb");
		var contextb = canvasb.getContext("2d");
		var image = new Image();
		
		window.onload= function(){
			image.src="../img/hudie.jpg";
			image.onload =function(){
				contexta.drawImage(image,0,0,canvasa.width,canvasb.height);
			}
		}
		//
		function filter(){
		contextb.clearRect(0,0,canvasb.width,canvasb.height);
		var imageDta =	contexta.getImageData(0,0,canvasa.width,canvasa.height);//全部
		contextb.putImageData(imageDta,0,0,0,0,canvasb.width,canvasb.height);
		
		}
	function filter1(){
		contextb.clearRect(0,0,canvasb.width,canvasb.height);
		var imageDta =	contexta.getImageData(0,0,canvasa.width,canvasa.height);
		contextb.putImageData(imageDta,0,0,50,50,canvasb.width-100,canvasb.height-100);//取部分
		}
	function filter2(){
		contextb.clearRect(0,0,canvasb.width,canvasb.height);
		var imageDta =	contexta.getImageData(0,0,canvasa.width,canvasa.height);
		contextb.putImageData(imageDta,40,40,50,50,canvasb.width-100,canvasb.height-100);
		}
	function filter3(){
		contextb.clearRect(0,0,canvasb.width,canvasb.height);
		var imageDta =	contexta.getImageData(0,0,canvasa.width,canvasa.height);//取的是a的全部
		//遍历b像素点
		var pixeldata = imageDta.data;
		for(var i=0;i<canvasb.width*canvasb.height;i++){
			//pixeldata[4*i+0]=0;//r
			//pixeldata[4*i+1]=0;//g
			pixeldata[4*i+2]=0;//b
		
		}
		contextb.putImageData(imageDta,0,0,0,0,canvasb.width,canvasb.height);
		}
	</script>
</html>
